<template>
	<view>
		<view style="display: flex;flex-direction: column;">

			<view style="padding: 20upx;background-color: #fff;">
				<u-search v-model="keyword" clearabled actionText="新增" placeholder="请输入客户名称/手机号/业务员" @change="change"
					@custom="goAdd" :actionStyle="{
						color:'#20c3aa'
					}"></u-search>
			</view>


			<view v-if="datalist.length > 0">

				<view class="list-item" v-for="(item, index) in datalist" :key="index">

					<view class="title-wrap">

						<text class="title-name">
							{{item.customerType == 1 ? '企业':'个人'}}
						</text>

					</view>

					<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

					<view class="text-line" v-if="item.customerType == 1">
						<text class="text-name">企业名称</text>
						<text class="text-value">{{item.customerName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">客户姓名</text>
						<text class="text-value">{{(item.customerType == 1 ? item.contactPerson:item.customerName)|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">联系电话</text>
						<text class="text-value">{{item.contactMobile|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">签约订单数</text>
						<text class="text-value">{{(item.signOrderCount>0?`已签约${item.signOrderCount}单`:'未签约订单')|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">所属业务员</text>
						<text class="text-value">{{item.businessPersonName|filterNull}}</text>
					</view>


					<view class="title-wrap">

						<view class="title-name" style="color: #ff6738;font-weight: 400;" @click="callPhone(item)">
							拨打电话
						</view>

						<view style="align-self: flex-end;display: flex;">
							<view class="min-btn" @click.stop="gobind(item)" v-if="item.bankCount>0" style="margin: 10upx 0;width: 130upx;">
								绑卡
							</view>

							<view class="min-btn" @click.stop="godetail(item)" style="width: 130upx;">
								详情
							</view>
						</view>

					</view>

				</view>

				<u-loadmore v-if="pageNo>2" :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
			</view>

			<u-empty v-else></u-empty>

		</view>

	</view>
</template>

<script>
	import {
		customlist
	} from '@/api/custom-api.js';

	export default {
		data() {
			return {
				pageNo: 1,
				loadingStatus: 'loading',
				datalist: [],
				keyword: ''
			}
		},

		onShow() {
			this.pageNo = 1;
			this.getData();
		},

		methods: {

			getData() {
				customlist({
					page: this.pageNo,
					keyword: this.keyword
				}).then(res => {
					if (this.pageNo == 1) {
						this.datalist = [];
						this.pageNo++;
						// uni.stopPullDownRefresh();

						this.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res.data)) {
							this.pageNo++;

							this.loadingStatus = 'loadmore';
						} else {

							this.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(res.data)) {
						this.datalist = this.datalist.concat(res.data);
					}

					// this.datalist = [{
					// 	customerId: "客户id",
					// 	customerType: "1",
					// 	customerName: "我是个公司",
					// 	contactPerson: "我是公司联系人",
					// 	contactMobile: "",
					// 	idCardImg: "身份证正面",
					// 	idCardImgBack: "身份证背面",
					// 	idCardExpirydate: "身份证失效日期",
					// 	idCardNo: "身份证号",
					// 	licenseImg: "营业执照图片",
					// 	license: "营业执照号码",
					// 	businessPersonId: "业务员id",
					// 	businessPersonName: "业务员名称",
					// 	signOrderCount: "2",
					// 	bankCount: "666"
					// },{
					// 	customerId: "客户id",
					// 	customerType: "2",
					// 	customerName: "0",
					// 	contactPerson: "联系人",
					// 	contactMobile: '',
					// 	idCardImg: "身份证正面",
					// 	idCardImgBack: "身份证背面",
					// 	idCardExpirydate: "身份证失效日期",
					// 	idCardNo: "身份证号",
					// 	licenseImg: "营业执照图片",
					// 	license: "营业执照号码",
					// 	businessPersonId: "业务员id",
					// 	businessPersonName: 0,
					// 	signOrderCount: "0",
					// 	bankCount: "0"
					// }]


				})
			},

			godetail(item) {
				uni.navigateTo({
					url: '/pagesB/my-custom/custom-detail?customerId='+item.customerId
				})
			},

			goAdd() {
				uni.navigateTo({
					url: '/pagesB/my-custom/add-custom'
				})
			},

			gobind(item) {
				uni.navigateTo({
					url: '/pagesB/my-custom/addbank?customId='+item.customerId
				})
			},

			clickloadmore() {
				this.getData();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},

			callPhone(item) {
				if(!uni.$u.test.isEmpty(item.contactMobile)){
					uni.makePhoneCall({
						phoneNumber: item.contactMobile,
						success: (res) => {
							console.log('拨打电话成功');
						}
					})
				}
			},

			change(e) {
				//输入框自动搜索，防抖处理
				uni.$u.debounce(() => {

					console.log(`执行搜索e=${e}   keyword=${this.keyword}`);
					this.pageNo = 1;
					this.getData();
				}, 1000);
			}

		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.getData();
		},

		onReachBottom() {
			console.log('到底了');

			this.getData();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.title-wrap {
		display: flex;
	}

	.title-name {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		margin-left: 30upx;
		font-weight: bold;
		color: #333;
	}
</style>
